<template>
    <!-- html结构 -->
    <div class="person">
        <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <button @click="changeObj">点击修改对象</button>
        <hr>
        <h2>当前求和的值为{{ sum }}</h2>
        <button @click="changeSum">点击后sum+1</button>

        <hr>
        <h2>{{ test.name }}++++{{ test.age }}</h2>
        <button @click="changeTest">点击修改对象</button>
        
    </div>
</template>
<script setup lang="ts" name="Person">
import {reactive, ref} from "vue";
// ref和reactive的使用原则
// 1若需要一个基本类型的响应式数据，必须使用ref。
// 2.若需要一个响应式对象，层级不深，ref、reactive都可以。
// 3.若需要一个响应式对象，且层级较深，推荐使用reactive。(表单相关的)


// ref里面写的是基本数据类型，对象类型均可
// reactive对象的属性是可以直接该，但是要修改整个对象，
// 本质相当于创建了一个新的对象,操作的不是同一个对象会使响应式失效
// 因此要用object.assign(obj1,obj2....)的接口的形式
// 将从第二个开始的参数逐个合并到第一个参数对象中

// 但是ref要修改整个对象,可以用xxx.value = {xxx},的形式就可以直接修改
// 因为xxx.value不管怎么改,其本身都是一个对象,所以修改其属性值,不会使响应式失效
// 数据
let car = reactive({
    brand:"audi",
    price:100
})
let sum=ref(0)

let test=ref({name:"张三",age:18})

function changePrice(){
    //ref变为对象后可以通过value属性访问数据
    car.price += 10;
}
function changeSum(){
    sum.value+=1
}
// 修改整个reactive对象
function changeObj(){
    Object.assign(car,{brand:"宝马",
    price:30})
}

function changeTest(){
    test.value={name:"王五",age:20}
}

</script>

<style scoped>
/* css样式 */
li{
    font-size: 20px;
}
</style>